<template>
  <div>
    <el-dialog
      title="文件预览"
      :visible.sync="innerVisible"
      width="60%"
      :before-close="handleClose"
    >
      <iframe
        :src="previewUrl"
        frameborder="0"
        style="width: 100%; height: 70vh"
      ></iframe>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    previewUrl: String,
    visible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      innerVisible: false
    }
  },
  watch: {
    visible(val) {
      this.innerVisible = val
    }
  },
  methods: {
    handleClose(done) {
      this.innerVisible = false
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/dialog.scss';
</style>
